<template>
  <div class="content-wraper">
    <div class="search-box">
      <el-form label-width="100px" :inline="true">
        <el-form-item label="合同名称">
          <el-input v-model="contractName" />
        </el-form-item>
        <el-form-item label="乙方名称">
          <el-input v-model="employeeName" />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
        <el-button type="warning" icon="el-icon-refresh" @click="reset()">重置</el-button>
      </el-form>
    </div>
    <div class="detail">
      <div class="list">
        <com-table
          v-model="selectedRow"
          auto-fill-parent
          :data="dataList"
          :columns="columns"
          :total="total"
          highlight-current-row
          @pageChange="pageChange"
        >
          <template v-slot:stockType="{row: {stockType}}">
            {{ getDictName(deviceStockContractInfoStockType, stockType) }}
          </template>
          <template v-slot:signTime="{row: {signTime}}">
            {{ dateFormat(signTime) }}
          </template>
          <template v-slot:countersignType="{row: {countersignType}}">
            {{ getDictName(deviceStockContractInfoCountersignType, countersignType) }}
          </template>
          <template v-slot:warrantyStartTime="{row: {warrantyStartTime}}">
            {{ dateFormat(warrantyStartTime) }}
          </template>
          <template v-slot:warrantyEndTime="{row: {warrantyEndTime}}">
            {{ dateFormat(warrantyEndTime) }}
          </template>
          <template v-slot:status="{row}">
            <a class="com-link" style="text-decoration:underline;" @click="getWorkflowDetail(row)">{{ row.status | formateFlowStatus }}</a>
          </template>
          <template v-slot:createTime="{row: {createTime}}">
            {{ dateFormat(createTime) }}
          </template>

        </com-table>
      </div>
      <div class="btns" style="padding-bottom: 10px">
        <el-button type="success" icon="el-icon-plus" @click="addDeviceStockContractInfosSettleInfo()">新增</el-button>
      </div>
      <div class="list-item-content">
        <com-table auto-fill-parent :data="infoData" :no-page="true" :columns="infoColumns">
          <template v-slot:name="{row}">
            <a class="com-link" @click="viewDetail(row)">{{ row.name }}</a>
          </template>
          <template v-slot:options="{row}">
            <el-button type="success" icon="el-icon-edit-outline" size="mini" @click="startProcess(row)">提交</el-button>
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editDeviceStockContractInfo(row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delDeviceStockContractInfo(row)">删除</el-button>
          </template>
          <template v-slot:mode="{row: {mode}}">
            {{ getDictName(DeviceStockContractInfoMode, mode) }}
          </template>
          <template v-slot:status="{row}">
            <a class="com-link" style="text-decoration:underline;" @click="getWorkflowDetail(row)">{{ row.status | formateFlowStatus }}</a>
          </template>
          <template v-slot:createTime="{row: {createTime}}">
            {{ dateFormat(createTime) }}
          </template>

        </com-table>
      </div>
    </div>
    <add-device-lease-contract-info-settle-info
      :id="tabId"
      :show-modal.sync="showModal"
      :opt-type="optType"
      :data="unitDetail"
      :relate-data="selectedRow"
      @freshList="getContractInfo"
    />
    <process-start :show-modal.sync="showStartModal" :currentrow="unitDetail" @freshList="search" />
    <workflow-schedule :show-modal.sync="showWorkflowSchedule" :data="workflowScheduleData" />
  </div>
</template>

<script>
import workflowSchedule from '@/components/TreeModal/workflowSchedule'
import { getMachineDeviceLeaseContractFinishInfoList, deleteMachineDeviceLeaseContractSettleInfo, getMachineDeviceLeaseContractSettleInfoList } from '@/api/runManage'
import moment from 'moment'
import { getDictName } from '@/utils/comm'
import addDeviceLeaseContractInfoSettleInfo from './addDeviceLeaseContractInfoSettleInfo.vue'
import { deviceStockContractInfoStockType, deviceStockContractInfoCountersignType, workflowStatus } from '@/utils/dicData'
export default {
  name: 'DeviceLeaseContractPayment',
  components: {
    addDeviceLeaseContractInfoSettleInfo,
    workflowSchedule
  },
  data() {
    return {
      contractName: '',
      employeeName: '',
      getDictName,
      selectedRow: null,
      deviceStockContractInfoStockType,
      deviceStockContractInfoCountersignType,
      workflowStatus,
      showStartModal: false,
      dataList: [],
      total: 0,
      pageParams: {
        pageNum: 1,
        pageSize: 10
      },
      showWorkflowSchedule: false,
      workflowScheduleData: {},
      showModal: false,
      optType: 'add',
      unitDetail: {},
      columns: [
        {
          label: '部门名称',
          prop: 'departmentName',
          width: '100'
        },
        /* {
          label: '合同编号',
          prop: 'contractNumber',
          width: '190'
        },*/
        {
          label: '合同名称',
          prop: 'contractName',
          width: '250'
        },
        {
          label: '合同金额',
          prop: 'contractAmount'
        },
        /* {
          label: '采购编号',
          prop: 'stockNumber',
          width: '160'
        },*/
        {
          label: '采购方式',
          prop: 'stockType',
          slot: 'stockType'
        },
        {
          label: '签订时间',
          prop: 'signTime',
          slot: 'signTime',
          width: '90'
        },
        /* {
          label: '付款方式',
          prop: 'payType'
        },
        {
          label: '交货地址',
          prop: 'address'
        },*/
        {
          label: '甲方名称',
          prop: 'employerName',
          width: '180'
        },
        /* {
          label: '甲方签订人',
          prop: 'employerSign',
          width: '100'
        },*/
        {
          label: '乙方名称',
          prop: 'employeeName',
          width: '180'
        },
        /* {
          label: '乙方签订人',
          prop: 'employeeSign',
          width: '100'
        },
        {
          label: '资金来源',
          prop: 'sourceAmount'
        },
        {
          label: '审批者',
          prop: 'approver'
        },
        {
          label: '会签类型',
          prop: 'countersignType',
          slot: 'countersignType'
        },*/
        {
          label: '备注',
          prop: 'remark'
        },
        /* {
          label: '质保金额',
          prop: 'warrantyAmount'
        },
        {
          label: '质保金开始日期',
          prop: 'warrantyStartTime',
          slot: 'warrantyStartTime',
          width: '120'
        },
        {
          label: '质保金截止日期',
          prop: 'warrantyEndTime',
          slot: 'warrantyEndTime',
          width: '120'
        },*/
        {
          label: '流程状态',
          prop: 'status',
          slot: 'status'
        },
        {
          label: '编制人',
          prop: 'founderName'
        },
        {
          label: '创建单位',
          prop: 'founderOrganizationName'
        },
        {
          label: '编制时间',
          prop: 'createTime',
          slot: 'createTime',
          width: '90'
        }
      ],
      infoData: [],
      infoColumns: [
        {
          label: '单据编号',
          prop: 'number'
        },
        {
          label: '结算数量',
          prop: 'settleCount'
        },
        {
          label: '结算金额',
          prop: 'settleAmount'
        },
        {
          label: '备注',
          prop: 'remark'
        },
        {
          label: '审批状态',
          slot: 'status'
        },
        {
          label: '编制人',
          prop: 'founderName'
        },
        {
          label: '编制日期',
          slot: 'createTime'
        },
        {
          fixed: 'right',
          label: '操作',
          width: '260',
          slot: 'options'
        }
      ],
      tabId: null
    }
  },
  watch: {
    selectedRow(newValue, oldValue) {
      if (newValue.id) {
        this.tabId = newValue.id
      }
      if (newValue) {
        this.getContractInfo()
      }
    }
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    getWorkflowDetail(data) {
      this.showWorkflowSchedule = true
      this.workflowScheduleData = data
    },
    startProcess(data) {
      this.unitDetail = data
      this.showStartModal = true
    },
    handleCurrentChange(row) {
    },
    dateFormat(data) {
      if (data) {
        return moment(data).format('YYYY-MM-DD')
      } else {
        return ''
      }
    },
    getContractInfo() {
      const params = {
        machineDeviceLeaseContractInfoId: this.selectedRow.id,
        pageNum: 1,
        pageSize: 1000
      }
      getMachineDeviceLeaseContractSettleInfoList(params).then(res => {
        const { data } = res.data || {}
        this.infoData = data || []
        // if (data && data.length > 0) {
        // }
      })
    },
    pageChange(data) {
      this.pageParams = data
      this.getDataList()
    },
    getDataList() {
      const params = {
        ...this.pageParams,
        contractName: this.contractName,
        employeeName: this.employeeName
      }
      getMachineDeviceLeaseContractFinishInfoList(params).then(res => {
        const { data, total } = res.data || {}
        if (data) {
          this.dataList = data
          this.total = total - 0
        }
      })
    },
    addDeviceStockContractInfosSettleInfo() {
      if (this.tabId) {
        this.optType = 'add'
        this.showModal = true
      }
    },
    editDeviceStockContractInfo(data) {
      this.optType = 'edit'
      this.unitDetail = data
      this.showModal = true
    },
    viewDetail(data) {
      this.optType = 'detail'
      this.unitDetail = data
      this.showAddFileModal = true
    },
    delDeviceStockContractInfo(data) {
      this.$confirm('确定要删除该材料采购合同结算明细吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const { id } = data
        deleteMachineDeviceLeaseContractSettleInfo({
          machineDeviceLeaseContractSettleInfoId: id
        }).then(res => {
          const { code, msg } = res
          if (code === '0001') {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getContractInfo()
          } else {
            this.$message({
              type: 'error',
              message: msg || '删除失败!'
            })
          }
        })
      }).catch(() => {
      })
    },
    search() {
      this.pageParams.pageNum = 1
      this.getDataList()
    },
    reset() {
      this.contractName = ''
      this.employeeName = ''
    }

  }
}
</script>

<style lang="scss" scoped>
.search-box {
  height: 50px;
}
.detail{
  height: calc(100% - 50px);
  .list{
    height: 60%;
  }
  .list-item-content{
    height: calc(40% - 42px);
  }
}
</style>
